<template>
  <view>
    <my-header bgColor="bg-white" :isBack="true">
      <block slot="content">授权</block>
      <block slot="right">
        <view class="save-button" @click="saveClick">保存</view>
      </block>
    </my-header>
    <view class="page-content" :style="{ height: this.ContentArea + 'px' }">
      <ba-tree-picker
        multiple
        :localdata="treeList"
        valueKey="value"
        textKey="slotTitle"
        childrenKey="children"
        :selected-data="selectedValue"
        @select-change="selectChange"
      />
    </view>
  </view>
</template>

<script>
import myHeader from "../../../components/my-header/my-header.vue";
import baTreePicker from "../../../components/ba-tree-picker/ba-tree-picker.vue";
import { union } from "lodash";

export default {
  components: {
    "my-header": myHeader,
    "ba-tree-picker": baTreePicker,
  },
  onLoad(option) {
    this.roleId = option.id;
  },
  mounted() {
    this.getTreeList();
    this.getRoleListByRoleId();
  },
  data() {
    return {
      roleId: "",
      treeList: [],
      selectedValue: [],
      oldSelectedValue: [],
    };
  },
  methods: {
    getTreeList() {
      this.$http.get("/sys/role/queryTreeList").then((res) => {
        if (res?.data?.success) {
          this.treeList = res?.data?.result?.treeList || [];
        }
      });
    },
    getRoleListByRoleId() {
      this.$http
        .get("/sys/permission/queryRolePermission", {
          params: {
            roleId: this.roleId,
          },
        })
        .then((res) => {
          if (res.data?.success) {
            const data = res.data?.result || [];
            this.oldSelectedValue = data;
            this.selectedValue = data;
          }
        });
    },
    selectChange(ids) {
      this.selectedValue = ids;
    },
    saveClick() {
      this.$http
        .post("/sys/permission/saveRolePermission", {
          roleId: this.roleId,
          lastpermissionIds: this.oldSelectedValue.join(","),
          permissionIds: this.selectedValue.join(","),
        })
        .then((res) => {
          this.$tip.toast(res.data?.message || "保存成功");
          if (res.data?.success) {
            uni.navigateBack({});
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.page-content {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px 24px;
}

.tree-view {
  flex: 1;
  padding: 20rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.tree-list {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.tree-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
  height: 0;
  opacity: 0;
  transition: 0.2s;
  overflow: hidden;
}

.save-button {
  color: #1890ff;
}
</style>
